<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <script src="https://cdn.tailwindcss.com"></script>
      <title>Email subscribe</title>
   </head>
   <body>
      <div class="h-screen bg-zinc-700 flex justify-center items-center">
         <!-- Card -->
         <div class="bg-zinc-800 rounded-md p-2">
            <div class="flex flex-col md:flex-row">
               <img
                  src="./images/image.jpg"
                  alt=""
                  class="object-fit rounded-xl h-80 m-3 md:h-64 md:rounded-l-xl md:rounded-r-none hover:scale-105 md:m-0 hover:rounded-xl"
               />
               <!-- class="rounded-md w-96 p-8 md:w-40 md:h-full md:p-0 h-40 object-fit" -->
               <div class="flex-auto w-96 p-4 md:p-8">
                  <div
                     class="text-white text-lg font-bold font-serif text-center md:text-left"
                  >
                     Get diet and fitness tip in your inbox
                  </div>
                  <div
                     class="text-white text-xs my-4 font-semi text-center md:text-left tracking-wide"
                  >
                     Eat better and exercise better.Sign up for the Diet &
                     Fitness newsletter.
                  </div>
                  <div
                     class="flex flex-col md:flex-row space-y-2 md:space-y-0 md:space-x-2"
                  >
                     <input
                        type="text"
                        class="rounded text-sm flex-auto p-2 text-center md:text-left text-white border border-zinc-600 bg-zinc-800 placeholder:text-xs focus:outline-none"
                        placeholder="Enter your email address"
                     />
                     <button
                        class="bg-green-400 rounded hover:bg-green-800 py-1.5 md:px-2 hover:text-white transition-colors"
                     >
                        subscribe
                     </button>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </body>
</html>
